<template>
  <div class="view">
    <div class="t_page">
      <div class="t_page2">
        <div class="t_nav">
          <h1>活动信息编辑页</h1>
          <div style="width: 320px;">

            <div class="t_nav_div">
              <div style="display: flex;width: 100%;">
                <div style="width: 145px;">
                  <el-upload
                    class="upload-demo"
                    :action="fujianUrl"
                    :on-success="fileUpDone"
                    :on-error="errorUpdate"
                    multiple
                    :limit="1">
                    <a href="#">添加附件</a>
                  </el-upload>
                </div>
                <div style="width: 145px;margin-left: 30px">
                  <el-upload
                    class="upload-demo"
                    :action="imgUrl"
                    :on-success="imgUpDone"
                    multiple
                    :limit="1">
                    <a href="#">插入图片</a>
                  </el-upload>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="t_info">
          <el-form :model="activeForm" label-position="top" :rules="activeRules" ref="activeForm" label-width="100px" class="demo-ruleForm" >
            <el-form-item label="活动名称" prop="title" >
              <el-input v-model="activeForm.title"></el-input>
            </el-form-item>
            <br>
            <el-form-item label="简介" prop="remark" >
              <el-input v-model="activeForm.remark"></el-input>
            </el-form-item>
            <br>

            <el-form-item label="活动时间">
              <el-form-item  prop="wssbkssj" style="display: inline-block">
                <el-date-picker type="date" placeholder="网上申报开始时间" v-model="activeForm.wssbkssj" style="width: 300px;display: inline-block"></el-date-picker>
              </el-form-item>
             --
              <el-form-item  prop="wssbjssj" style="display: inline-block">
                <el-date-picker type="date" placeholder="网上申报结束时间" v-model="activeForm.wssbjssj" style="width: 300px;display: inline-block"></el-date-picker>
              </el-form-item>
            </el-form-item>
            <br>
<!--
            <el-form-item label="活动状态" prop="status">
              <el-select v-model="activeForm.status" placeholder="请选择活动状态" style="width: 200px">
                <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value" style="text-indent: 1em"></el-option>
              </el-select>
            </el-form-item>
-->
            <br>
            <el-form-item label="活动内容" prop="content">
              <mavon-editor
                ref=md
                @imgAdd="$imgAdd"
                @imgDel="$imgDel"
                v-model="activeForm.content"
                :toolbars="toolbars"
                :box-shadow="false"
              ></mavon-editor>
            </el-form-item>
            <br>
            <el-form-item label="申报须知">
                <div class="t_info_div2">
                <textarea v-model="activeForm.sbxz" placeholder="" rows=1 cols=30 class="input"
                          onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';});"
                          onblur="clearInterval(this.clock);" style="resize: none"></textarea>
              </div>
            </el-form-item>
            <br>
          </el-form>



        </div>
        <div class="t_button">
          <div>
            <a href="#" class="but" @click="back">取消</a>
            <a href="#" class="but" @click="Push">{{ pushText }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myConfig from "../common/myConfig";
export default {
  name: "ActionEditor",
  data(){
    const validateEndTime = (rule, value, callback) => {
      if (value == '' || value ==null) {
        callback(new Error('请输入截止时间'))
      } else {
        if (
          new Date(this.activeForm.wssbkssj).getTime() >=
          new Date(this.activeForm.wssbjssj).getTime()
        ) {
          callback(new Error('截止时间必须大于开始时间！'))
        } else {
          callback()
        }
      }
    }
    return{
      pushText: "确认发布",
      options: [{
        value: 0,
        label: '未开始'
      }, {
        value: 1,
        label: '进行中'
      }, {
        value: 2,
        label: '已结束'
      }],
      fujianUrl: myConfig.url + "events/annexUpload",
      imgUrl: myConfig.url + "events/eventsCoverUpload",
      activeForm:{
        title: "",
        wssbkssj: null,
        wssbjssj: null,
        content: "",
        status: "",
        createUser: JSON.parse(window.localStorage.getItem("userInfo")).ausername,
        annex: "",
        ggtp: "",
        remark: "",
        sbxz: '1、阅读申报须知:\n' +
          '请申报人仔细阅读本次评审活动的申报说明，如果因为信息错误导致申报资格核验不符合，责任自负。\n' +
          '\n' +
          '2、在线填写评审表:\n' +
          '在线填写《专业技术职务任职资格评审表》时，请确保本人申报信息的真实性、完整性、正确性，在线填写的内容必须与盖章扫描件内容保持高度一致，盖章前请确保所有内容是准确无误的，若因此导致重复盖章无法按时提交材料的，责任自负。\n' +
          '\n' +
          '3、预览下载评审表:\n' +
          '下载《专业技术职务任职资格评审表》之前可以先在线预览一下的生成的文档内容和格式是否正确，若文档分页跨页，修改《专业技术职务任职资格评审表》对应内容字数后再下载。\n' +
          '\n' +
          '4、打印盖章:\n' +
          '将申报须知里对应职称的材料清单以及下载的《专业技术职务任职资格评审表》到指定部门盖章。\n' +
          '\n' +
          '5、上传盖章扫描件:\n' +
          '上传盖章完毕的文件扫描成PDF文件，在控制PDF文件大小的情况下确保公章是清晰的, 若文件太大，请拆分成多个文件，然后再依次上传。\n' +
          '\n' +
          '6、提交申报材料:\n' +
          '所有的材料上传完毕以后，注意必须进行提交，若材料不提交导致失去参与评审资格的，责任自负。\n' +
          '\n' +
          '《用户协议》\n' +
          '《专业技术职称评审系统许可及服务协议》(以下简称“本协议”）由您与专业技术职称评审系统服务提供方共同缔结，本协议具有合同效力。请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制腾讯责任的条款《(以下称“免责条款”)、对用户权利进行限制的条款(以下称“限制条款”)、约定争议解决方式和同法管辖的条款，以及开通或使用某项服务的单独协议。前述免责、限制及争议解决方式和管辖条款可能以黑体加粗、颜色标记或其他合理方式提示您注意，包括但不限于本协议第二条、第三条、第四条、第六条、第九条等相关条款，您对该等条款的确认将可能导致您在特定情况下的被动、不便、损失，请您在确认同意本协议之前或在使用专业技术职称评审系统服务之前再次阅读前述条款。'

      },

      activeRules:{
        title: [
          { required: true, message: '请输入活动标题', trigger: 'blur' }
        ],
        wssbkssj: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        wssbjssj: [
          // {  required: true, message: '请选择日期', trigger: 'change' },
          {
            type: "string",
            required: true,
            trigger: 'change',
            validator: validateEndTime,
          }
        ],
        content: [],
        status: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        createUser: [],
        annex: [],
        ggtp: [],
        remark: [
          { required: true, message: '请输入简介', trigger: 'blur' }
        ],
        sbxz: []
      },
      //编辑器工具组件
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）

        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
    }
  },
  methods: {
    back(){
      this.$router.replace("/activity")
    },
    errorUpdate(){
      this.$message.error("上传失败！附件最大为50MB,请检查附件")
    },
    //活动发布
    Push(){
      this.$refs["activeForm"].validate((valid) => {
        if (valid) {
          this.$axios({
            url: "/events/add",
            method: "post",
            data: this.activeForm,
          }).then(res=>{
            if (res.data){
              this.$message.info("发布成功！")
              this.$refs["activeForm"].resetFields()
              this.$router.push("/activity")
            }else {
              this.$message.info("发布失败！")
            }
          }).catch((err)=>{
            this.$message.info("发布失败！")
          })
        } else {
          this.$message.error("请检查填写字段！")
          return false;
        }
      });

    },
    //附件上传成功后的方法
    fileUpDone(res){
      this.activeForm.annex = res
    },
    //图片上传成功后的方法
    imgUpDone(res){
      this.activeForm.ggtp = res
    },
    // 绑定@imgAdd event
    $imgAdd(pos, $file){
      // 第一步.将图片上传到服务器.
      let formData = new FormData();
      formData.append('image', $file);
      this.$axios({
        url: '/imgUpload',
        method: 'post',
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data' },
      }).then((url) => {
        // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
        /**
         * $vm 指为mavonEditor实例，可以通过如下两种方式获取
         * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
         * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
         */
        this.$refs.md.$img2Url(pos, url.data);
      })
    },
    $imgDel($file){
      this.$axios({
        url: "/removeFile",
        method: "post",
        params: {
          filePath: $file[0]
        }
      }).then(res=>{
        console.log(res.data)
      })
    },
  },
  created() {
    let id = this.$route.params.id
    if (id!=null){
      this.pushText = "确认修改"
      this.$axios({
        url: "/events/getOne",
        method: "get",
        params: {
          id: id
        }
      }).then(res=>{
        this.activeForm = res.data
      })
    }
  }
}
</script>

<style src="../css/ActionEditor.css" scoped></style>
<style scoped>
.upload{
  padding: 20px;
  background-color: black;
}
.view{
  width: 100%;
  height: 100%;
  background-color: #D6E0F9;
}
.input{
  height: 900px;
  background-color: transparent;
  width: 100%;
  border: none;
  outline: none;
  font-size: 18px;
  line-height: 30px;
  overflow: hidden;
  color: red;
}
</style>
